<template>
  <table v-if="show">
    <tr class="list_title">
      <th colspan="2">
        订单号：
        <span>{{orderNumber}}</span>
      </th>
      <th colspan="2">
        下单日期：
        <span>{{orderData}}</span>
      </th>
      <th colspan="2">
        订单状态：
        <span class="satte">{{orderStatus}}</span>
      </th>
    </tr>
    <tr class="list_min">
      <td rowspan="2">
        <img :src="orderImg" alt="订单图" class="dingdanPic" />
      </td>
      <td rowspan="2">{{orderName}}</td>
      <td rowspan="2">{{orderNorms}}</td>
      <td rowspan="2">x{{orderNum}}</td>
      <td rowspan="2" class="list-jifen">积分：{{orderScore}}</td>
      <td rowspan="2">
        <router-link class="lookdetail" to="/P_intorder/P_intdetail">
          <span class="active checkxiang">查看详情</span>
        </router-link>
        <router-link class="lookdetail" to>
          <Pbutton msg="删除订单" class="deleatedingdan" @fun="click(index)"></Pbutton>
        </router-link>
      </td>
    </tr>
  </table>
</template>
	
<script>
// 引入按钮小组件
import Pbutton from "@/components/P_button.vue";
import Qs from "qs";
export default {
  components: {
    Pbutton
  },
  data() {
    return {
      show: true
    };
  },
  props: {
    orderNumber: Number,
    orderData: String,
    orderStatus: String,
    orderImg: String,
    orderName: String,
    orderNorms: String,
    orderNum: Number,
    orderScore: String,
    index: Number
  },
  methods: {
    click(index) {
		var _this = this;
      window.console.log("删除订单");
      _this.show = false;
      // 转换为字符串
      let data = Qs.stringify({ id: index, ad: "0" });
      this.$axios({
        method: "post",
        data: data,
        url: "http://localhost:3000/recentlook/delorder",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          window.console.log(response.data);
        })
        .catch(function(error) {
          window.console.log(error);
        });
    }
  }
};
</script>
<style>
table {
  width: 100%;
  border: 1px solid #e7e7e7;
  margin-bottom: 20px;
}
.list_title {
  color: #333333;
  background: #f2f2f2;
}
.list_title th {
  text-align: center;
  font-size: 14px;
  line-height: 45px;
}
.list_title .satte {
  color: #f08200;
}
.list_min {
  color: #999999;
}
.lookdetail {
  display: block;
}
.list_min td {
  text-align: center;
  font-size: 15px;
}
.list-jifen {
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
}
.checkxiang {
  font-size: 14px;
  display: inline-block;
  margin-top: 18px;
  margin-bottom: 18px;
}
.deleatedingdan {
  font-size: 12px;
  padding: 10px 15px;
  margin-bottom: 22px;
}
.dingdanPic {
  width: 54%;
  height: 55%;
  border: 1px solid #dedede;
}
</style>
